<template>
  <div class="goodslist">
    <!-- <router-link class="goodslist-item" v-for="item in goodslist" :key="item.id" :to="'/home/GoodsInfo/'+item.id" tag="div">
      <img :src="item.img_url" alt>
      <h3 style="font-size:14px;font-weight:bold">{{item.title}}</h3>
      <div class="bottom">
        <p class="price">
          <span style="color:red;font-size:15px">￥{{item.sell_price}}</span>
          <span>
            <del>￥{{item.market_price}}</del>
          </span>
        </p>
        <p class="hot">
          <span>热卖中</span>
          <span>剩余:{{item.stock_quantity}}件</span>
        </p>
      </div>
    </router-link> -->

      <div class="goodslist-item" v-for="item in goodslist" :key="item.id" @click="goTo(item.id)">
      <img :src="item.img_url" alt>
      <h3 style="font-size:14px;font-weight:bold">{{item.title}}</h3>
      <div class="bottom">
        <p class="price">
          <span style="color:red;font-size:15px">￥{{item.sell_price}}</span>
          <span>
            <del>￥{{item.market_price}}</del>
          </span>
        </p>
        <p class="hot">
          <span>热卖中</span>
          <span>剩余:{{item.stock_quantity}}件</span>
        </p>
      </div>
      </div>   
     <mt-button type="danger" size="large" plain @click="addMore">加载更多</mt-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
        number:1,
        goodslist:[]
    };
  },
  created() {
      this.getGoods();
  },
  methods: {
     async getGoods(){
          this.$http.get("api/getgoods?pageindex="+this.number).then(result=>{
              if (result.data.status === 0) {
                  this.goodslist = this.goodslist.concat(result.data.message);
              }
          })
      },
      addMore(){
          this.number++;
          this.getGoods();
      },
      goTo(id){
          this.$router.push({name:'goodsinfo',params:{id}});
      }
  }
};
</script>

<style scoped>
* {
  margin: 4px;
  padding: 0;
}
.goodslist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.goodslist-item {
  width: 47%;
  min-height: 290px;
  /* background-color:gainsboro; */
  box-shadow: 0 4px 4px gainsboro;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eeeeee;
  overflow: hidden;
}
.goodslist-item img{
    box-shadow: 0 0px 4px gainsboro;
    width: 100%;
}
.hot {
  display: flex;
  justify-content: space-between;
}
.bottom{
    background-color: #eeeeee;
}
.bottom p{
    margin: 0;
    padding: 4px;
}
</style>
